

<template>
  <div>
    <el-button class="butB_Sel" @click="printBtn()">打印1</el-button>
    <el-button class="butB_Sel" @click="printBtn2()">打印2</el-button>
    <div class="app-container" id="printcons" style="">
      <div
        style="margin: auto; padding: 0px 20px; width: 950px; font-size: 14px"
      >
        <table
          SubCount="40"
          border="0"
          width="100%"
          align="center"
          cellspacing="0"
          cellpadding="0"
          cellSpacing="0"
          cellPadding="0"
          bordercolor="#000000"
          style="border-collapse: collapse"
        >
          <thead v-if="tabeldata.hospital_info">
            <tr style="line-height: 60px; text-align: center">
              <td colspan="20" style="font-size: 26px" class="titleB">
                {{ his_name }}【{{
                  tabeldata.hospital_info.ipt_no
                }}】病人费用总清单
              </td>
            </tr>
            <tr style="height: 50px">
              <td colspan="6">
                起始时间:{{ tabeldata.hospital_info.start_time }}
              </td>
              <td colspan="7">
                停止时间: {{ tabeldata.hospital_info.end_time }}
              </td>
              <td colspan="7">
                出院时间:{{ tabeldata.hospital_info.leave_time }}
              </td>
            </tr>
            <tr style="height: 30px; padding: 0px; text-align: center">
              <td colspan="2" style="border: 1px solid black">住院号</td>
              <td colspan="1" style="border: 1px solid black">
                {{ tabeldata.hospital_info.ipt_no }}
              </td>
              <td colspan="1" style="border: 1px solid black">姓名</td>

              <td colspan="2" style="border: 1px solid black">
                {{ tabeldata.hospital_info.member.name }}
              </td>

              <td colspan="1" style="border: 1px solid black">性别</td>
              <td colspan="1" style="border: 1px solid black">
                {{
                  tabeldata.hospital_info.member.gender == 1
                    ? "男"
                    : tabeldata.hospital_info.member.gender == 2
                    ? "女"
                    : ""
                }}
              </td>
              <td colspan="1" style="border: 1px solid black">费用类别</td>

              <td colspan="1" style="border: 1px solid black">
                {{ tabeldata.hospital_info.show_nature }}
              </td>
              <td colspan="5" style="border: 1px solid black">入院时间</td>
              <td colspan="5" style="border: 1px solid black">
                {{ tabeldata.hospital_info.begntime }}
              </td>
            </tr>
            <tr style="height: 30px; padding: 0px; text-align: center">
              <td colspan="1" style="border: 1px solid black">住院科室</td>
              <td colspan="2" style="border: 1px solid black">
                {{ tabeldata.hospital_info.department_name }}
              </td>
              <td colspan="1" style="border: 1px solid black">床号</td>

              <td colspan="2" style="border: 1px solid black">
                {{ tabeldata.hospital_info.bed_name }}
              </td>

              <td colspan="1" style="border: 1px solid black">预交款</td>
              <td colspan="1" style="border: 1px solid black"></td>
              <td colspan="2" style="border: 1px solid black">总费用</td>

              <td colspan="4" style="border: 1px solid black">
                {{ tabeldata.hospital_info.wallet.wallet_outcome }}
              </td>
              <td colspan="2" style="border: 1px solid black">总余额</td>
              <td colspan="4" style="border: 1px solid black">
                {{ tabeldata.hospital_info.wallet.wallet_money }}
              </td>
            </tr>
            <tr style="height: 30px; padding: 0px; text-align: center">
              <td colspan="2" style="width: 110px; border: 1px solid black">
                费用大类
              </td>
              <td colspan="4" style="width: 260px; border: 1px solid black">
                编号
              </td>
              <td colspan="4" style="width: 320px; border: 1px solid black">
                费用名称
              </td>

              <td colspan="2" style="width: 70px; border: 1px solid black">
                甲乙类
              </td>

              <td colspan="2" style="width: 70px; border: 1px solid black">
                单位
              </td>
              <td colspan="2" style="width: 70px; border: 1px solid black">
                单价
              </td>
              <td colspan="2" style="width: 70px; border: 1px solid black">
                数量
              </td>

              <td colspan="2" style="width: 70px; border: 1px solid black">
                金额
              </td>
            </tr>
          </thead>
          <tbody>
            <tr
              v-for="(item, index) in drug2"
              :key="index"
              style="height: 30px; text-align: center; padding: 0px"
            >
              <template v-if="item.type2 == '1'">
                <td colspan="2" style="border: 1px solid black">
                  {{ item.cate_name }}
                </td>
                <td colspan="4" style="border: 1px solid black">
                  {{ item.no }}
                </td>

                <td colspan="4" style="border: 1px solid black">
                  {{ item.name }}
                </td>

                <td colspan="2" style="border: 1px solid black">
                  {{ item.type }}
                </td>

                <td colspan="2" style="border: 1px solid black">
                  {{ item.unit }}
                </td>
                <td colspan="2" style="border: 1px solid black">
                  {{ item.price }}
                </td>

                <td colspan="2" style="border: 1px solid black">
                  {{ item.number }}
                </td>
                <td colspan="2" style="border: 1px solid black">
                  {{ item.money }}
                </td>
              </template>
              <template v-if="item.type2 == '2'">
                <td colspan="20" style="border: 1px solid black">
                  {{ item.cate_name }}小计:{{ item.allPrice }}
                </td>
              </template>
            </tr>
          </tbody>
          <tbody>
            <tr style="height: 30px; text-align: center; padding: 0px">
              <td colspan="20" style="border: 1px solid black; border-top: 0">
                大写合计:&nbsp;{{
                  tabeldata.dx_cost
                }}&nbsp;&nbsp;小写合计:&nbsp;{{ tabeldata.cost }}
              </td>
            </tr>
          </tbody>
          <tfoot class="footer" style="line-height: 30px; width: 100%">
            <!--                 <tr>-->
            <!--                   <td colspan="20" style="width:100%;text-align:center;border:1px solid black;border-top:0px">大写合计:&nbsp;{{tabeldata.dx_cost}}&nbsp;&nbsp;小写合计:&nbsp;{{tabeldata.cost}}</td>-->
            <!--                 </tr>-->
            <tr v-if="showTFoot">
              <td colspan="20" style="display: flex">
                当前是第<font tdata="PageNO" format="0">##</font>页/共<font
                  tdata="PageCount"
                  format="0"
                  >##</font
                >页
              </td>
            </tr>
            <tr v-else style="line-height: 60px">
              <td
                colspan="1"
                style="display: flex; padding-bottom: 20px; border: 0"
              >
                &nbsp;
              </td>
            </tr>
          </tfoot>
        </table>

        <!-- <p style="page-break-after: always;"></p> -->
      </div>
    </div>
  </div>
</template>
<script>
import { getdictIndex } from "@/api/register";
import { printHospitalFee } from "@/api/zhuyanre";
import print from "print-js";

export default {
  props: ["id"],
  data() {
    return {
      showTFoot: true,
      sourcelist: [],
      arrdata: [],
      drug2: [],
      dayin: false,
      tabeldata: {},
      feelist: [],

      his_name: process.env.VUE_APP_HOSPITAL_API,
    };
  },

  mounted() {
    this.tianjiaids2();
  },
  // watch: {
  //   id(n) {
  //     this.tianjiaids2();
  //   },
  // },
  methods: {
    tianjiaids2() {
      printHospitalFee({ hospital_id: this.id }).then((res) => {
        this.tabeldata = res.data;
        this.feelist = res.data.fee;
        console.log("this.feelist", this.feelist);
        this.scliplist(this.feelist);
      });
    },
    scliplist(list) {
      var datalist = [];

      list.forEach((v) => {
        datalist = datalist.concat(
          v.lists.map((v2) => {
            return {
              ...v2,
              cate_name: v.cate_name,
              cate_money: v.cate_money,
              type2: 1,
            };
          })
        );
        datalist.push({
          type2: 2,
          allPrice: v.cate_money,
          cate_name: v.cate_name,
        });
      });

      this.drug2 = datalist;
    },
    printBtn(e) {
      this.showTFoot = false;
      this.dayin = true;

      setTimeout(() => {
        this.dayinfun();
      }, 200);
    },
    printBtn2() {
      this.CreateOneFormPage();
    },
    CreateOneFormPage() {
      this.LODOP = getLodop();
      this.LODOP.ADD_PRINT_TABLE(
        10,
        0,
        "100%",
        "100%",
        document.getElementById("printcons").innerHTML
      );
      //LODOP.SET_PRINT_STYLEA(0,"Top2Offset",-40); //这句可让次页起点向上移
      // this.LODOP.ADD_PRINT_HTM(2,0,"50%",200,"<body style='margin-top:0'>表格后面用<font color=blue>ADD_PRINT_HTM</font>附加其它备注</body>");
      this.LODOP.SET_PRINT_MODE("PRINT_PAGE_PERCENT", "Auto-Width");
      this.LODOP.SET_PRINT_PAGESIZE(0, "20cm", "27.5cm", "");

      this.LODOP.SET_PRINT_STYLEA(0, "LinkedItem", -1);
      this.LODOP.PREVIEW();
    },
    dayinfun() {
      let subOutputRankPrint = document.getElementById("printcons");

      let newContent = subOutputRankPrint.innerHTML;
      let oldContent = document.body.innerHTML;
      document.body.innerHTML = newContent;
      window.print();
      window.location.reload();
      return false;
      // ————————————————
      // 版权声明：本文为CSDN博主「Fabricant」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
      // 原文链接：https://blog.csdn.net/Fabricant/article/details/119457914
      // this.remove_ie_header_and_footer();
      // let subOutputRankPrint = document.getElementById("printcons");
      // console.log(subOutputRankPrint.innerHTML);
      // let newContent = subOutputRankPrint.innerHTML;
      // let oldContent = document.body.innerHTML;
      // document.body.innerHTML = newContent;
      // window.print();
      //   window.location.reload();
      // this.$emit("reload");
      // document.body.innerHTML = oldContent;
      // return false;
    },
  },
};
</script>

<style media="print">
@media print {
  @page {
    size: auto;
    margin: 0cm;
  }

  .titleB {
    padding-top: 50px;
  }

  body {
    -webkit-print-color-adjust: exact;
  }
}
</style>
<style lang='scss' scoped>
</style>
